<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>任务新增</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" th:href="@{/static/css/font.css}">
    <link rel="stylesheet" th:href="@{/static/css/xadmin.css}">
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/static/js/common.js}" charset="UTF-8" ></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script th:src="@{/static/js/html5.min.js}" charset="UTF-8" src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script th:src="@{/static/js/respond.min.js}" charset="UTF-8" src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>定时列表明细</legend>
</fieldset>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">定时列表明细
        </div>
        <div class="layui-card-body ">
            <table class="layui-hide" id="test" lay-filter="test" ></table>
        </div>
    </div>
</div>

</body>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="启用|关闭" lay-filter="stateDemo" {{ d.state == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addJobTask"><i class="layui-icon">&#xe608;</i> 新增定时任务</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">刷新列表</button>
    </div>
</script>
<script th:inline="javascript">
    var ctx = [[@{/}]]
    var type = /*[[${type}]]*/    //获取model中的值
</script>

<script th:inline="none">
    layui.use(['table','form'],  function(){
        var table = layui.table
            ,$ = layui.jquery
            ,form = layui.form;


        //第一个实例
        table.render({
            elem: '#test'
            // ,height: 'full-20'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,url: ctx + 'timer/timers?type=' + type.toUpperCase() //数据接口
            ,loading: true
            ,page: true //开启分页
            ,response: {
                statusCode: 200 //规定成功的状态码，默认：0
                ,countName: 'total' //规定数据总数的字段名称，默认：count
            },request: {
                limitName: 'rows' //每页数据量的参数名，默认：limit
            }
            ,cellMinWidth: 80
            ,cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, hide : true}
                ,{field: 'name', title: '名称'}
                ,{field: 'timer', title: '定时类型', templet :function (row){return ifTimer(row.timer); }}
                ,{field: 'createTime', title: '创建时间'}
                ,{field: 'startTime', title: '下次任务执行时间'}
                ,{field:'state', title:'状态', templet: '#switchTpl', unresize: true}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'update':
                    table.reload('test');
                    break;
                case 'addJobTask':
                    layer.open({
                        type: 2
                        ,title: ifType(type) + '定时任务配置'
                        ,area: ['400px', '380px']
                        ,shadeClose: true
                        ,content: ctx + "setTimer?type=" + type
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };

        });

        //监听监听操作
        form.on('switch(stateDemo)', function(obj){
            $.get(
                ctx +"timer/updateState?state=" + obj.elem.checked + "&id=" + this.value,
                function(response) {
                    //回调函数方法体
                    if (response.code == 200){

                    }
                    layer.msg(response.msg);
                }
            )
        });

    });



</script>

</html>